import { Col, Row, Tooltip,Spin } from "antd";
import { inject, observer } from "mobx-react";
import React from "react";
import { WeaAlertPage } from 'ecCom';
import { i18n } from "../../../public/i18n";
import * as Util from "../../../util/Util";

@inject("individualMainStore")
@observer
export default class InfluenceItemsCom extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.individualMainStore;
  }

  renderContent = () => {
    const {
      personalIndexData: { influenceData },
    } = this.store;
    const noData = (
      <div style={{ width: "100%", height: "100px" }}>
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@b703pk`} icon={<i className="icon-coms-NoData" />} iconSize={35} >
          <div style={{ textAlign: "center", marginTop: "4px" }}>
            {i18n.message.onNoData()}
          </div>
        </WeaAlertPage>
      </div>
    )
    return influenceData.length === 0
      ? noData
      : influenceData.map((v, i) => {
          return i % 2 === 0 ? (
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@etbz6g@${i}`} key={i} style={{ marginTop: "24px" }}>
              {influenceData
                .slice(i, i % 2 === 0 ? i + 2 : i % 2)
                .map((y, j) => {
                  return (
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@klxb74@${i}`} xs={24} sm={24} md={12} lg={12} xl={12}>
                      <span
                        className="icon-span"
                        style={{
                          color: "#fff",
                          backgroundColor: y.iconcolor|| '#893D86',
                        }}
                      >
                        <i className={y.iconinfo || `icon-coms02-Portrait-of-personnel`} />
                      </span>
                      <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@6xmw3v@${i}`} title={y.desc}>
                        <span
                          className="info-span"
                          dangerouslySetInnerHTML={{ __html: y.htmlStr }}
                        ></span>
                      </Tooltip>
                      {/* <div className="divider"></div> */}
                    </Col>
                  );
                })}
            </Row>
          ) : null;
        });
  };

  render() {
    const {   loadings: { influenceLoading } } = this.store;
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@dbgti4`} spinning={influenceLoading}>
        <div className="portrait-personal-influence-container">
              <div className="top-title-wrapper">
                <div>
                  <span className="titile-icon"></span>
                  <span className="title">{i18n.label.effect()}</span>
                </div>
                <span>{i18n.label.dataDeadLine()} {this.getDeadline()}</span>
              </div>
              <div className="items-wrapper">{this.renderContent()}</div>
            </div>
      </Spin>
    );
  }

  getDeadline =()=>{
    const time = new Date();
    time.setTime(time.getTime() - (24 * 60 * 60 * 1000));
    const Y = time.getFullYear()
    const M = ((time.getMonth() + 1) > 9 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1))
    const D = (time.getDate() > 9 ? time.getDate() : '0' + time.getDate())
    const timeStr = Y + '-' + M + '-' + D +' ' + '23:59:59';// 
    return timeStr;
}
}
